Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

autoprefixer

Package Overview
Dependencies
Maintainers
1
Versions
244
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

autoprefixer

Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website

  • 9.8.8
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created

What is autoprefixer?

The autoprefixer npm package is a PostCSS plugin that parses your CSS and adds vendor prefixes to CSS rules using values from Can I Use. It is a tool that automates the process of adding vendor prefixes to CSS rules to ensure cross-browser compatibility.

What are autoprefixer's main functionalities?

Adding vendor prefixes

This feature automatically adds necessary vendor prefixes to CSS rules. The code sample shows how to use autoprefixer with PostCSS to process a CSS string that includes the 'display: flex;' rule, which then outputs the rule with the appropriate vendor prefixes.

const autoprefixer = require('autoprefixer');
const postcss = require('postcss');

postcss([ autoprefixer ]).process('a { display: flex; }').then(result => {
  console.log(result.css);
  // Output: 'a { display: -webkit-box; display: -ms-flexbox; display: flex; }'
});

Customizing browser support

Autoprefixer allows customization of the browsers you want to target. The code sample demonstrates how to specify the browsers using the 'overrideBrowserslist' option to target the last 2 versions of all browsers.

const autoprefixer = require('autoprefixer');
const postcss = require('postcss');

postcss([ autoprefixer({ overrideBrowserslist: ['last 2 versions'] }) ])
.process('a { display: flex; }').then(result => {
  console.log(result.css);
  // Output will include prefixes for the last 2 versions of all browsers.
});

Removing unnecessary prefixes

Autoprefixer can also remove outdated prefixes if they are no longer needed for the specified browser range. The code sample shows how to disable this feature using the 'remove' option.

const autoprefixer = require('autoprefixer');
const postcss = require('postcss');

postcss([ autoprefixer({ remove: false }) ])
.process('a { -webkit-box-shadow: 0 0 10px black; box-shadow: 0 0 10px black; }').then(result => {
  console.log(result.css);
  // Output will keep the -webkit-box-shadow prefix even if it's not necessary for the specified browsers.
});

Other packages similar to autoprefixer

Keywords

FAQs

Package last updated on 04 Oct 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc